<template>
  <div>
    <Header :name="name"></Header>
    <div class="login-parsel">
      <el-upload
        class="avatar-uploader"
        action="http://127.0.0.1:3000/zjm/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        <img src="/pen.png" alt="" class="penimg" />
      </el-upload>
      <p>
        昵称<br />
        <el-input
          style="width: 21.8rem; height: 2.7rem; margin-top: 0.5rem"
          placeholder="你的名字"
          v-model="form.uname"
        />
      </p>
      <p>
        电子邮件<br />
        <el-input
          style="width: 21.8rem; height: 2.7rem; margin-top: 0.5rem"
          placeholder="您的电子邮件地"
          v-model="form.email"
        />
      </p>
      <p style="position: relative">
        电话号码<br />
        <input type="text" class="phoneinp1" placeholder="+86" /><input
          type="text"
          class="phoneinp2"
          placeholder="输入电话号码"
          v-model="form.phone"
        />
        <img src="/china.png" alt="" class="chinaimg" />
      </p>
      <p>
        出生日期<br />
        <el-input
          style="width: 21.8rem; height: 2.7rem; margin-top: 0.5rem"
          placeholder="你的出生日"
          v-model="form.birthday"
        />
      </p>
      <p>
        性别<br />
        <el-select
          v-model="form.sex"
          placeholder="Select"
          size="large"
          style="width: 21.8rem; height: 2.7rem; margin-top: 0.5rem"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </p>
      <p style="text-align: center">
        <button class="confirmbtn-copy" @click="submit">确认</button>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from "../My/Header.vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import { useCounterStore } from "../../stores/counter";
import { ElMessage } from "element-plus";
const useStore = useCounterStore();

const route = useRoute();
const name = route.query.name;
console.log(name);

import { ref, reactive } from "vue";
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";

let imageUrl = useStore.info.imgsrc;

const form = reactive({
  uname: useStore.info.uname,
  email: useStore.info.email,
  phone: useStore.info.phone,
  birthday: useStore.info.birthday,
  sex: useStore.info.sex,
  imgsrc: useStore.info.imgsrc,
});

const options = reactive([
  {
    value: 0,
    label: "女",
  },
  {
    value: 1,
    label: "男",
  },
]);

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl = URL.createObjectURL(uploadFile.raw!);
  form.imgsrc = "http://127.0.0.1:3000/" + response.path;
};

const submit = async () => {
  console.log(form);
  
  axios
    .post(`http://localhost:3000/message/edit?id=${useStore.info._id}`, {
      form,
    })
    .then((ele) => {
      if (ele.data.code === 200) {
        console.log(ele.data.data);
        useStore.info = ele.data.data;
        ElMessage({
          message: "修改成功",
          type: "success",
        });
      }
    });
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.login-parsel {
  width: 90vw;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  p {
    padding-top: 0.5rem;
    box-sizing: border-box;
  }
}
.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #d0d0d0;
  padding: 0.7rem;
  box-sizing: border-box;
}
.avatar-uploader {
  width: 7rem;
  height: 7rem;
  margin: 0 auto;
  border: 1px dashed #ffb900;
  border-radius: 50rem;
  margin-top: 2rem;
  text-align: center;
  line-height: 7rem;
  position: relative;
}
.avatar {
  width: 7rem;
  height: 7rem;
  border-radius: 50rem;
  position: absolute;
  left: 0;
  top: 0;
}

.penimg {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: 0rem;
  bottom: 0rem;
  border-radius: 0.5rem;
}

.phoneinp1 {
  width: 23vw;
  padding: 0.7rem;
  box-sizing: border-box;
  margin-top: 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.3rem 0rem 0rem 0.3rem;
  border-right: none;
  text-align: right;
}

.chinaimg {
  width: 2rem;
  height: 1.5rem;
  position: absolute;
  left: 0.5rem;
  top: 2.9rem;
}
.phoneinp2 {
  width: 61vw;
  padding: 0.7rem;
  box-sizing: border-box;
  margin-top: 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.3rem;
  border-left: none;
}
.confirmbtn {
  width: 85vw;
  height: 3rem;
  margin: 0 auto;
  margin-top: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #ffe9b0;
  color: white;
  font-size: 1.2rem;
}
.confirmbtn-copy {
  width: 85vw;
  height: 3rem;
  margin: 0 auto;
  margin-top: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #ffb900;
  color: white;
  font-size: 1.2rem;
}
</style>